<script setup lang="ts">
import { useData } from 'vitepress';
import { computed, inject, Ref } from 'vue';
import VPFeatures from './VPFeatures.vue';
import FarrisFeatures from './FarrisFeatures.vue';

const { frontmatter: fm } = useData();
</script>

<template>
    <FarrisFeatures>
        <template #before-feature>
            <slot name="before-feature"></slot>
        </template>
        <template #feature-group-001>
            <div class="feature-header feature-group-001">
                <h3>表格组件</h3>
                <span class="icon"></span>
                <div class="intro"><p>高性能、全特性、面向专业级应用的data gird</p></div>
                <a class="farris-doc-btn" href="/components/data-grid/">了解更多</a>
            </div>
        </template>
        <template #feature-group-002>
            <div class="feature-header feature-group-002">
                <h3>日历组件</h3>
                <span class="icon"></span>
                <div class="intro"><p>满足预定会议、日程安排、日程预约使用场景</p></div>
                <a class="farris-doc-btn" href="/components/calendar/">了解更多</a>
            </div></template
        >
        <template #feature-group-003>
            <div class="feature-header feature-group-003">
                <h3>人员组件</h3>
                <span class="icon"></span>
                <div class="intro"><p>从多个角度筛选人员，满足多种业务场景</p></div>
                <a class="farris-doc-btn" href="/components">了解更多</a>
            </div></template
        >
        <template #after-feature>
            <slot name="after-feature"></slot>
        </template>
    </FarrisFeatures>
    <VPFeatures v-if="fm.features" class="VPHomeFeatures" :features="fm.features" />
</template>

<style scoped>

.farris-doc-feature--header .feature-header {
    padding: 0 0 0 40px;
    position: relative;
}

.farris-doc-feature.fixed .feature-header.inb-animate-slideInUp {
    visibility: visible !important;
}

.feature-header .icon {
    position: absolute;
    width: 31px;
    height: 31px;
    top: -2px;
    left: 0;
    background-image: var(--feature-group-001-icon);
    background-repeat: no-repeat;
    background-size: 31px;
}
.feature-group-002 .icon {
    background-image: var(--feature-group-002-icon);
}
.feature-group-003 .icon {
    background-image: var(--feature-group-003-icon);
}

.feature-header h3 {
    font-size: 24px;
    color: var(--character-title-text);
    margin: 0 0 10px;
}

.feature-header .intro {
    height: 145px;
    color: var(--feature-text);
}


.farris-doc-feature--left {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(300vh - 60px);
    min-width: 405px;
}

.farris-doc-feature.fixed .farris-doc-feature--left {
    position: fixed;
    top: 60px;
    height: calc(100vh - 60px);
    /* transform: translateX(-100%);*/
}
.farris-doc-feature.fixed .farris-doc-feature--header {
    height: 233px;
}

.farris-doc-feature.fixed .feature-header {
    padding: 0 0 0 40px;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
}
.feature-small-size .feature-header .intro{
    height:auto;
    margin-bottom:20px;
}

</style>
